<template>
  <div class="sdy-home-goods-list">
    <!-- 下拉刷新组件 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
      class='goods-list-box'
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :offset='150'
      >
        <div 
        @click='goToDetail(item.proid)'
        class='goods-item'
        v-for="item in goodsList"
        :key="item.proid"
        >
        <img :src='item.img1'>
        <p class="title van-multi-ellipsis--l2">
          {{ item.proname }}
        </p>
        <p class="price">
          <span class="current">￥{{item.issale? (item.originprice * 10 / item.discount).toFixed(2) : item.originprice.toFixed(2) }}</span><br />
          <span class="old">￥{{item.originprice.toFixed(2)}}</span>

        </p>
        <van-tag round type="primary" v-if='item.issale' color='#c72418'>折扣</van-tag>
        <van-tag  round type="primary" v-if='item.isseckill' color='rgb(236, 133, 7)'>热销</van-tag>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
//导入请求接口
import {goodsListApi} from '@/api/goods'
import {useRouter, type Router} from 'vue-router'
import type{MyHotItem} from '@/config/interface'
const $router: Router = useRouter()
//准备列表控制变量
//加载完毕后吧loading改为false, 请求加载的时候自动会设置为true，
const loading = ref<boolean>(false)

//当没有而更多数据的时候，吧数据的值改为true就不会再加载了
const finished = ref<boolean>(false)

//添加下拉刷新控制器
const refreshing = ref<boolean>(false)


const goodsList  = ref<MyHotItem[]>([])

//准备数据表示请求相关信息
const goodsInfo = reactive({count:1,limitNum:10})

// 滚动到指定位置的时候触发的事件 offset设置触发点
const onLoad = ()=>{
  setTimeout( async ()=>{
      const res = await goodsListApi(goodsInfo)
      goodsList.value = [...goodsList.value,...res.data]
      goodsInfo.count++
      loading.value = false
      if(!res.data.length) finished.value = true
  }, 450)
}

//下拉刷新执行的代码
const onRefresh = ()=>{
  setTimeout( async()=>{
    goodsInfo.count= Math.floor(Math.random() * 5 + 1)
    const res = await goodsListApi(goodsInfo)
    goodsList.value = res.data
    refreshing.value = false
    goodsInfo.count++
    finished.value = false
  },1500)
}

//跳转详情页
const goToDetail = (id: string)=>{
  // console.log(`查看商品id为${id}的商品信息`)
  // 携带参数直接跳转
  $router.push({path: "detail",query:{proid:id }})
} 
</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
  .sdy-home-goods-list{
    box-sizing: border-box;
    padding: 0 15px;
    .goods-list-box{
      display:flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      .goods-item{
        width: 45%;
        border: 1px solid #ccc;
        margin-bottom: 3px;
        padding-bottom: 3px;
        > p {
          margin: 1px
        }
        > span{
           margin-right: 3px;
         }
        > img{
          width: 170px;
          height: 170px;
          display: block;
        }
        > .title{
          font-size: 12px;
        }
        > .price{
          font-size: 12px;
          color:#ccc;
         
          > .old{
          text-decoration: line-through;

          }
          > .current{
            font-size: 14px;
            color: $globalColor;
          }
        } 
      }
    }
  }

</style>
